let littleBox = document.querySelector('#mask');
let small = document.querySelector('#small');
let big = document.querySelector('#big');
let box = document.querySelector('#box');
let bigImg = big.firstElementChild;
//box的左距离和上距离
let boxLeft = box.offsetLeft;
let boxTop = box.offsetTop;
// //littleBox的宽高
let littleBoxH;
let littleBoxW;


// //littleBox的活动范围
let littleBoxRunW;
let littleBoxRunH;





// small.onmouseenter = function() {
//     littleBox.style.display = 'block';
//     big.style.display = 'block';


//     //littleBox的宽高
//     littleBoxH = littleBox.offsetHeight;
//     littleBoxW = littleBox.offsetWidth;

//     //littleBox的活动范围
//     littleBoxRunW = small.offsetWidth - littleBoxW;
//     littleBoxRunH = small.offsetHeight - littleBoxH;

// }
small.onmouseenter = fn1;

function fn1() {

    littleBox.style.display = 'block';
    big.style.display = 'block';


    //littleBox的宽高
    littleBoxH = littleBox.offsetHeight;
    littleBoxW = littleBox.offsetWidth;

    //littleBox的活动范围
    littleBoxRunW = small.offsetWidth - littleBoxW;
    littleBoxRunH = small.offsetHeight - littleBoxH;

}
small.onmouseleave = fn2;

function fn2() {

    littleBox.style.display = 'none';
    big.style.display = 'none';

}
small.onmousemove = fn3;

function fn3(eve) {

    //鼠标基于文档的坐标
    let pX = eve.pageX;
    let pY = eve.pageY;
    //鼠标对于small里的实时坐标
    let smallX = pX - boxLeft;
    let smallY = pY - boxTop;

    //将鼠标再small的实时坐标给到littleBox的定位,实现跟随鼠标移动
    littleBox.style.left = (smallX - littleBoxW / 2) + 'px';
    littleBox.style.top = (smallY - littleBoxH / 2) + 'px';

    //littleBox的left和top实时
    let littleBoxL = littleBox.offsetLeft;
    let littleBoxT = littleBox.offsetTop;

    //左边界和上边界
    if (littleBoxL < 0) {
        littleBox.style.left = 0;
    };
    if (littleBoxT < 0) {
        littleBox.style.top = 0;
    };
    //右边界和下边界
    if (littleBoxL > littleBoxRunW) {
        littleBox.style.left = littleBoxRunW + 'px';
    };
    if (littleBoxT > littleBoxRunH) {
        littleBox.style.top = littleBoxRunH + 'px';
    };

    //little实时left/最大移动left=bigimg的实时left/最大运动left
    let bigImgRun = bigImg.offsetWidth - big.offsetWidth;
    //利用公式算出bigimg的实时left,top
    let bigImgL = littleBoxL / littleBoxRunW * bigImgRun;
    let bigImgT = littleBoxT / littleBoxRunH * bigImgRun;
    //实时定位
    bigImg.style.left = -bigImgL + 'px';
    bigImg.style.top = -bigImgT + 'px';

}